/**
 * Created by levy on 16/6/15.
 */
/**
 *
 *
 * @desc [ 图片放大的弹出层] 样式在 _layout.scss里
 *      要淡入，还要引入animate.css
 * @param imgSrc 图片路径
 * @param visible 显示隐藏  this为显示
 * @param hideHandler 隐藏函数
 *
 * //新版本做法 add by levy
 *     可以只传 src， 即显示, tap 点击后消失
 *     可与别的组件如 Swiper (的enlargeHandler)结合使用
 */
var LargeImg = React.createClass({
    getDefaultProps: function () {
        return {
            hideHandler: ''
        }
    },
    getInitialState() {
        return {
            src: this.props.src || '', //新版本传src
        }
    },
    render: function () {
        //旧式做法
        if(this.props.src === undefined)
            return (
                <div ref="largeImg" onTouchMove={this._onMoveHandler}
                     className={"large-img-layer animated fadeIn " + this.props.visible}>
                    <span className="delete-icon" ref="delete"></span>
                    <img src={this.props.imgSrc} alt=""/>
                </div>
            );
        else //新版做法
            return (
                <div ref="largeImg" onTouchMove={this._onMoveHandler}
                     className={'large-img-layer animated fadeIn ' + (this.state.src ? 'this' : '' )}>
                    <span className="delete-icon" ref="delete"></span>
                    <img src={this.state.src} alt=""/>
                </div>
            )
    },
    componentDidMount: function () {
        const hideImg = (e) => {
            //旧版本
            if(this.props.src === undefined)
                this.props.hideHandler && this.props.hideHandler();
            else
                this.setState({src: ''});
        };

        //旧版本
        if(typeof mui != 'undefined')
            React.findDOMNode(this.refs.delete).addEventListener('tap', (e) => {
                hideImg(e);
                liefeng.utils.stopBubble(e);
            });
        else
            React.findDOMNode(this.refs.delete).addEventListener('touchend', (e) => {
                hideImg(e);
                liefeng.utils.stopBubble(e);
            });
    },
    componentWillReceiveProps(nextProps) {
        if(nextProps.src)
            this.setState({src: nextProps.src});
    },
    _onMoveHandler: function (e) {
        e.stopPropagation();
        e.preventDefault();
    }
});

export default LargeImg;
